<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            perspective: 800px;
        }
        body{
            background-color: #000;
            
        }
        #box{
            width: 192px;
            height: 108px;
            transform-style: preserve-3d;
            position: relative;
            margin: 250px auto;
            transform: rotateX(-20deg) rotateY(0deg);
        }
        #box img{
            width: 192px;
            height: 108px;
            position: absolute;
            border-radius: 5px;
            transform: rotateX(0deg) rotateY(0deg);
            -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%,rgba(255,255,255,0.3));
        }
    </style>
    <script>
        window.onload = function(){
            var boxid = document.getElementById("box");
            var imgs = boxid.getElementsByTagName("img");
            var deg1 = 360 / imgs.length;
            for(var i = 0 ; i < imgs.length ; i++){
               imgs[i].style.transform = "rotateY("+deg1*i+"deg) translateZ(400px)";
               imgs[i].style.transition = "2s";
            }


            var lastX = 0;
            var lastY = 0;
            var newX = 0;
            var newY = 0;
            var derX = 0;
            var derY = 0;
            var roX = -20;
            var roY = 0;
            boxid.onmousedown = function(ev){
               var e = ev || window.event;
               lastX = e.clientX;
               lestY = e.clientY;

               document.onmousemove = function(ev){
                var boxid = document.getElementById("box");
                 var e = ev || window.event;
                 newX = e.clientX;
                 newY = e.clientY;

                 derX = lastX - newX;
                 derY = lastY - newY;

                 roX = roX + derY;
                 roY = roY + derX;

                 boxid.style.transform = "rotateX("+ roX +"deg) rotateY("+ roY +"deg)";

                 lastX = newX;
                 lastY = newY;
               }
            }

            document.onmouseup = function(){
                // boxid.onmousedown = null;
                document.onmousemove = null;
                 timer = setInterval(function(){
                 derX = derX*0.95;
                 derY = derY*0.95;
                 
                 roX = roX + derY;
                 roY = roY + derX;

                 boxid.style.transform = "rotateX("+ roX +"deg) rotateY("+ roY +"deg)";
                 if(Math.abs(derX) < 0.1 && Math.abs(derY) < 0.1){
                        clearInterval(timer);
                 }
                },1000/60);
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <img src="./图2.1.jpg">
        <img src="./图2.2.jpg">
        <img src="./图2.3.jpg">
        <img src="./图2.4.jpg">
        <img src="./图2.5.jpg">
        <img src="./图2.6.jpg">
        <img src="./图3.1.jpg">
        <img src="./图3.2.jpg">
        <img src="./图3.3.jpg">
        <img src="./图3.4.jpg">
        <img src="./图3.5.jpg">
        <img src="./图3.6.jpg">
    </div>
</body>
</html>